<template>
  <section>
    <header>
      <div class="header-structure">
        <a href="/" style="font-size: 0.8rem">
          Lin Website
        </a>
        <nav>
          <a href="#"><span>Consumer</span></a>
          <a href="#"><span>Professional</span></a>
          <a href="#"><span>Enterprise</span></a>
          <a href="#"><span>Explore</span></a>
          <a href="#"><span>About</span></a>
        </nav>
        <div class="log" v-on:click="log">
          <!-- <i class="uil uil-apps"></i> -->
           <div class="header_menu">
            <MenuIcon/>
           </div>
        </div>
      </div>
    </header>
  </section>
</template>


<script lang="ts">
import { gsap } from 'gsap'

import { defineComponent, reactive, onMounted, toRefs, computed } from 'vue'
export const useModelWrapper = (props: { [x: string]: any; }, emit: (arg0: string, arg1: any) => any, name = 'modelValue') => {
  return computed({
    get: () => props[name],
    set: (value: any) => emit(`update:${name}`, value),
  })
}


export default defineComponent({
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    editData: {
      type: Object,
    }
  },
  setup(props: any, { emit }: any) {
    const header_menu = useModelWrapper(props, emit, 'visible')
    const {editData, visible} = toRefs(props)
    const data = reactive({
      sizeState: {
        "BIG": "big",
        "SMALL": "small"
      },
      state: ref(),
      timer: ref(),
    })

    const tween = gsap

  
    const loadAnimation = () =>{
      const tween = gsap.timeline({delay: 0.8})
      tween.from("header", {duration: 0.5, ease: 'power2', y: -20 * 6})
      tween.to("header", {duration: 0, ease: 'power2', y: 0})
    }

    // 防抖，只获取一次resize
    const debounce = (fn: { (): void; (): void; }, delay: number | undefined) => {
      return function() {
        if (data.timer) {
          clearTimeout(data.timer);
        }
        data.timer = setTimeout(() => {
          fn();
        }, delay);
      }
    };

    
    const handleResize = () => {
      data.state = data.sizeState.BIG
      let width = window.innerWidth > 800 ? data.sizeState.BIG : data.sizeState.SMALL
      if(data.state !== width){
        navSmall()
        return
      }
      navBig()
    }


    const navSmall = () => {
      tween.to('.header-structure nav', {duration: 0.6, ease: "power2", opacity: 0, x: 300, display: "none"})
      tween.to('header .log', {duration: 0.3, opacity: 1, display: "flex"})
    }

    const navBig = () => {
      tween.to('header .log', {duration: 0.6, opacity: 0, display: "none"})
      tween.to('.header-structure nav', {duration: 0.3, ease: "power2", opacity: 1, x: 0, display: "flex"})
      gsap.to(".menu", {duration:1, ease: "power2", opacity: 0, display: "none"})
    }


    const cancalDebounce = debounce(handleResize, 500)


    const log = () => { 
      emit('log_bottom', "none")
      
    }



    onMounted(() => {
      loadAnimation()
      cancalDebounce()
      window.addEventListener('resize', cancalDebounce);
    })
    
    onUnmounted(() => {
      window.removeEventListener('resize', cancalDebounce);
    })


    
  return {
    data,
    loadAnimation,
    handleResize,
    header_menu,
    editData,
    visible,
    log,
  }
  }

})
</script>


<style scoped>
@import url(/assets/style.css);

a {
  color: var(--main--border-color);
}
.header-structure {
  /* border: 2px dashed var(--main--border-color); */
  display: flex;
  position: relative;
  align-items: center;
  transition: all 1s;
  background-color: var(--main-text-color);
  border-bottom: 1px solid;
}


.header-structure {
  justify-content: space-between;  
  height: var(--header-height);
  padding: 0 var(--header-right-left-padding);
}



header div.log {
  display: none;
  color: var(--main--border-color);
  font-size: 2rem;
  line-height: 1em;
}

header div.log:hover {
  color: rgb(224, 224, 29);
}


.header-structure nav {
  width: 40%;
  max-width: var(--main-width);
  display: flex;
  justify-content: space-between;
  gap: 10%;
  font-size: 0.9rem;
}

.header-structure nav a {
  position: relative;
  font-size: 0.7rem;
  font-family: 'Noto Sans SC', monospace;
} 

.header-structure nav a::before,
.header-structure nav a::after{
  content: "";
  display: block;
  box-sizing: border-box;
  position: absolute;
  bottom: -5px;
  left: 50%;
  width: 0%;
  height: 2px;
  border-radius: 3px;
  background-color: var(--main--border-color);
  transition: all 0.3s ease;
}

.header-structure nav a:hover::before {
  width: 100%;
  left: 0;
}

.header_menu {
  height: 40px;
  filter: invert(1); 
}


@media (max-width: 800px) {

  .header-structure nav {
    display: none;
  }
}



</style>


